<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  userData: {
    type: Object,
    required: true
  }
});

// 表单数据
const formData = ref({
  name: props.userData.name,
  email: props.userData.email,
  phone: props.userData.phone,
  avatar: props.userData.avatar,
  password: '',
  newPassword: '',
  confirmPassword: '',
  notifications: {
    email: true,
    sms: true,
    app: false
  },
  privacy: {
    shareActivity: false,
    showProfile: true
  }
});

// 文件上传相关
const fileInputRef = ref<HTMLInputElement | null>(null);
const previewImage = ref<string | null>(null);
const avatarFile = ref<File | null>(null);

// 触发文件选择
const triggerFileInput = () => {
  if (fileInputRef.value) {
    fileInputRef.value.click();
  }
};

// 处理文件选择
const handleFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  const files = target.files;
  
  if (files && files.length > 0) {
    avatarFile.value = files[0];
    
    // 预览图片
    const reader = new FileReader();
    reader.onload = (e) => {
      if (e.target) {
        previewImage.value = e.target.result as string;
        formData.value.avatar = e.target.result as string;
      }
    };
    reader.readAsDataURL(avatarFile.value);
  }
};

// 保存个人信息
const saveProfile = () => {
  // 在实际项目中，这里会将头像文件上传到服务器
  if (avatarFile.value) {
    console.log('上传头像文件:', avatarFile.value.name);
    // 模拟上传成功
    setTimeout(() => {
      alert('个人信息和头像已更新');
      // 重置文件输入框
      if (fileInputRef.value) {
        fileInputRef.value.value = '';
      }
    }, 1000);
  } else {
    alert('个人信息已更新');
  }
};

// 更改密码
const changePassword = () => {
  if (!formData.value.password) {
    alert('请输入当前密码');
    return;
  }
  
  if (formData.value.newPassword !== formData.value.confirmPassword) {
    alert('两次输入的新密码不一致');
    return;
  }
  
  alert('密码已更新');
  formData.value.password = '';
  formData.value.newPassword = '';
  formData.value.confirmPassword = '';
};

// 保存通知设置
const saveNotificationSettings = () => {
  alert('通知设置已更新');
};

// 保存隐私设置
const savePrivacySettings = () => {
  alert('隐私设置已更新');
};
</script>

<template>
  <div class="user-settings">
    <h2 class="section-title">账号设置</h2>
    
    <div class="settings-section">
      <h3>个人信息</h3>
      <form @submit.prevent="saveProfile" class="settings-form">
        <div class="form-group">
          <label for="name">姓名</label>
          <input 
            type="text" 
            id="name" 
            v-model="formData.name" 
            class="form-control"
          >
        </div>
        
        <div class="form-group">
          <label for="email">邮箱</label>
          <input 
            type="email" 
            id="email" 
            v-model="formData.email" 
            class="form-control"
          >
        </div>
        
        <div class="form-group">
          <label for="phone">手机号</label>
          <input 
            type="tel" 
            id="phone" 
            v-model="formData.phone" 
            class="form-control"
          >
        </div>
        
        <div class="form-group">
          <label>头像</label>
          <div class="avatar-upload">
            <div class="current-avatar">
              <img :src="previewImage || formData.avatar" alt="当前头像">
            </div>
            <div class="avatar-actions">
              <button type="button" class="upload-btn" @click="triggerFileInput">更换头像</button>
              <input 
                type="file"
                ref="fileInputRef"
                @change="handleFileChange" 
                accept="image/*"
                class="file-input-hidden"
              >
              <p class="avatar-hint" v-if="avatarFile">已选择: {{ avatarFile.name }}</p>
            </div>
          </div>
        </div>
        
        <button type="submit" class="save-btn">保存个人信息</button>
      </form>
    </div>
    
    <div class="settings-section">
      <h3>修改密码</h3>
      <form @submit.prevent="changePassword" class="settings-form">
        <div class="form-group">
          <label for="current-password">当前密码</label>
          <input 
            type="password" 
            id="current-password" 
            v-model="formData.password" 
            class="form-control"
          >
        </div>
        
        <div class="form-group">
          <label for="new-password">新密码</label>
          <input 
            type="password" 
            id="new-password" 
            v-model="formData.newPassword" 
            class="form-control"
          >
        </div>
        
        <div class="form-group">
          <label for="confirm-password">确认新密码</label>
          <input 
            type="password" 
            id="confirm-password" 
            v-model="formData.confirmPassword" 
            class="form-control"
          >
        </div>
        
        <button type="submit" class="save-btn">更新密码</button>
      </form>
    </div>
    
    <div class="settings-section">
      <h3>通知设置</h3>
      <form @submit.prevent="saveNotificationSettings" class="settings-form">
        <div class="form-group checkbox-group">
          <input 
            type="checkbox" 
            id="email-notifications" 
            v-model="formData.notifications.email"
          >
          <label for="email-notifications">接收邮件通知</label>
        </div>
        
        <div class="form-group checkbox-group">
          <input 
            type="checkbox" 
            id="sms-notifications" 
            v-model="formData.notifications.sms"
          >
          <label for="sms-notifications">接收短信通知</label>
        </div>
        
        <div class="form-group checkbox-group">
          <input 
            type="checkbox" 
            id="app-notifications" 
            v-model="formData.notifications.app"
          >
          <label for="app-notifications">接收应用推送</label>
        </div>
        
        <button type="submit" class="save-btn">保存通知设置</button>
      </form>
    </div>
    
    <div class="settings-section">
      <h3>隐私设置</h3>
      <form @submit.prevent="savePrivacySettings" class="settings-form">
        <div class="form-group checkbox-group">
          <input 
            type="checkbox" 
            id="share-activity" 
            v-model="formData.privacy.shareActivity"
          >
          <label for="share-activity">分享我的旅行活动</label>
        </div>
        
        <div class="form-group checkbox-group">
          <input 
            type="checkbox" 
            id="show-profile" 
            v-model="formData.privacy.showProfile"
          >
          <label for="show-profile">允许其他用户查看我的个人资料</label>
        </div>
        
        <button type="submit" class="save-btn">保存隐私设置</button>
      </form>
    </div>
  </div>
</template>

<style scoped>
.user-settings {
  color: #333;
}

.section-title {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 22px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.settings-section {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.settings-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}

.settings-form {
  max-width: 600px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #666;
}

.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.checkbox-group {
  display: flex;
  align-items: center;
}

.checkbox-group input {
  margin-right: 10px;
}

.checkbox-group label {
  margin-bottom: 0;
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: 20px;
}

.current-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #eee;
}

.current-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.file-input-hidden {
  display: none;
}

.avatar-hint {
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #666;
}

.upload-btn {
  padding: 8px 15px;
  background-color: white;
  border: 1px solid #ddd;
  color: #666;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-btn:hover {
  background-color: #f5f5f5;
}

.save-btn {
  padding: 10px 20px;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 16px;
}

.save-btn:hover {
  background-color: #0055aa;
}

@media (max-width: 768px) {
  .avatar-upload {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style> 